<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="filter-container">
        <el-radio-group v-model="timeRange" @change="handleTimeChange">
          <el-radio-button label="today">今天</el-radio-button>
          <el-radio-button label="yesterday">昨天</el-radio-button>
          <el-radio-button label="last7days">过去7天</el-radio-button>
          <el-radio-button label="last30days">过去30天</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="monthYear"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
          @change="handleMonthYearChange"
          class="ml-10"
        ></el-date-picker>
      </div>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="热门商品订单数量" name="quantity">
          <el-table :data="quantityData" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
            <el-table-column label="销售数量" prop="salesQuantity" align="center"></el-table-column>
            <el-table-column label="销售金额" prop="salesAmount" align="center">
              <template #default="scope">
                <span>¥ {{ toFixed(scope.row.salesAmount, 2) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="热门商品订单金额" name="amount">
          <el-table :data="amountData" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
            <el-table-column label="销售数量" prop="salesQuantity" align="center"></el-table-column>
            <el-table-column label="销售金额" prop="salesAmount" align="center">
              <template #default="scope">
                <span>¥ {{ toFixed(scope.row.salesAmount, 2) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getProductStatistics } from '@/api/csmshop/productStatistics';

export default {
  name: 'ProductStatistics',
  data() {
    return {
      timeRange: 'last30days',
      monthYear: [],
      activeTab: 'quantity',
      quantityData: [],
      amountData: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    toFixed(value, decimals) {
      if (isNaN(value) || value === null || value === undefined) return '0.00';
      return parseFloat(value).toFixed(decimals);
    },
    handleTimeChange() {
      this.monthYear = []; // Clear month/year selection when time range changes
      this.fetchData();
    },
    handleMonthYearChange() {
      this.timeRange = ''; // Clear time range selection when month/year changes
      this.fetchData();
    },
    handleTabClick() {
      this.fetchData();
    },
    fetchData() {
      getProductStatistics({ timeRange: this.timeRange, monthYear: this.monthYear, tab: this.activeTab }).then(response => {
        if (this.activeTab === 'quantity') {
          this.quantityData = response.data;
        } else {
          this.amountData = response.data;
        }
      }).catch(error => {
        console.error('Error fetching product statistics:', error);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.ml-10 {
  margin-left: 10px;
}
</style>